import { Button, Card, Col, Modal, Pagination, Row, Space, Table } from 'antd'
import React, { useState } from 'react'
import {
  useCommodityAttributeId,
  useCommodityParameter,
  useCommodityType
} from '@/api/query'

import { FileTextOutlined } from '@ant-design/icons'
import { FormattedMessage } from 'react-intl'
import { useAppSelector } from '@/store/hooks'

interface DataType {
  _id: string
  key: number
  id: number
  name: string
  attributeCount: number
  paramCount: number
}

const Index = () => {
  const [pageNum, setPageNum] = useState(1) // 当前页
  const [pageSize, setPageSize] = useState(5) // 每页条数
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
  const [currentId, setCurrentId] = useState<number>(0)
  const [currentId1, setCurrentId1] = useState<number>(0)
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [isModalOpen1, setIsModalOpen1] = useState(false)

  const { definedLocale } = useAppSelector((state) => state.front)

  const list1: DataType[] = []
  const list2: DataType[] = []
  const list3: DataType[] = []

  const { isLoading, data, error } = useCommodityType(pageNum, pageSize)

  const {
    isLoading: isLoadingId,
    data: dataAttribute,
    error: errorAttribute
  } = useCommodityAttributeId(currentId)

  const {
    isLoading: isLoadingParameter,
    data: dataParameter,
    error: errorParameter
  } = useCommodityParameter(currentId1)

  if (isLoading || isLoadingId || isLoadingParameter) {
    return <div>loading</div>
  }

  if (error || errorAttribute || errorParameter) {
    return <div>error</div>
  }

  if (data && data.data_list) {
    data.data_list.forEach((ele: DataType) => {
      list1.push({ ...ele, key: ele.id })
    })
  }

  if (dataAttribute && dataAttribute.list) {
    dataAttribute.list.forEach((ele: DataType) => {
      list2.push({ ...ele, key: ele.id })
    })
  }

  if (dataParameter && dataParameter.list) {
    dataParameter.list.forEach((ele: DataType) => {
      list3.push({ ...ele, key: ele.id })
    })
  }

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys)
  }

  const changPage = (page: number, pageSize: number) => {
    setPageNum(page) // 改变当前页
    setPageSize(pageSize) // 改变每页个数
  }

  const param = (record: DataType) => {
    setCurrentId(record.id)
    setIsModalOpen(true)
  }

  const attribute = (record: DataType) => {
    setCurrentId1(record.id)
    setIsModalOpen1(true)
  }

  // 编辑
  const edit = (record: DataType) => {
    console.log('编辑列表===', record)
  }

  // 删除
  const dele = (record: DataType) => {
    console.log('删除列表===', record)
  }

  const columns: any[] = [
    {
      title: <FormattedMessage id="commodity_brand.id" />,
      dataIndex: 'id'
    },
    {
      title: <FormattedMessage id="commodity_type.name" />,
      dataIndex: 'name',
      render: (text: string) => <a>{text}</a>
    },
    {
      title: <FormattedMessage id="commodity_type.attribute.count" />,
      dataIndex: 'attributeCount'
    },
    {
      title: <FormattedMessage id="commodity_type.param.count" />,
      dataIndex: 'paramCount'
    },
    {
      title: <FormattedMessage id="commodity_type.setting" />,
      dataIndex: 'setting',
      render: (_, record: DataType) => (
        <Space>
          <Button onClick={() => param(record)}>
            <FormattedMessage id="commodity_type.attribute.list" />
          </Button>
          <Button onClick={() => attribute(record)}>
            <FormattedMessage id="commodity_type.param.list" />
          </Button>
        </Space>
      )
    },
    {
      title: <FormattedMessage id="commodity_brand.operate" />,
      dataIndex: 'operation',
      render: (_, record: DataType) => (
        <Space>
          <Button type="primary" onClick={() => edit(record)}>
            <FormattedMessage id="commodity_brand.edit" />
          </Button>
          <Button danger type="primary" onClick={() => dele(record)}>
            <FormattedMessage id="commodity_brand.delete" />
          </Button>
        </Space>
      )
    }
  ]

  const columnsAttribute = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '属性名称',
      dataIndex: 'name'
    },
    {
      title: '种类',
      dataIndex: 'inputList'
    },
    {
      title: '排序',
      dataIndex: 'sort'
    }
  ]

  const columnsParam = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '属性名称',
      dataIndex: 'name'
    },
    {
      title: '种类',
      dataIndex: 'inputList'
    },
    {
      title: '排序',
      dataIndex: 'sort'
    }
  ]

  const handleOk = () => {
    setIsModalOpen(false)
  }

  const handleCancel = () => {
    setIsModalOpen(false)
  }

  const handleOk1 = () => {
    setIsModalOpen1(false)
  }

  const handleCancel1 = () => {
    setIsModalOpen1(false)
  }

  return (
    <div>
      <Card>
        <Row>
          <Col span={6}>
            <FileTextOutlined />
            <FormattedMessage id="commodity_title.data.list" />
          </Col>
          <Col span={6}></Col>
          <Col span={6}></Col>
          <Col span={6} style={{ textAlign: 'right' }}>
            <Button type="default">
              <FormattedMessage id="commodity_title.add" />
            </Button>
          </Col>
        </Row>
      </Card>
      {/* 数据 */}
      <Card style={{ marginTop: 20 }}>
        <Table
          rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
          columns={columns}
          dataSource={list1}
          pagination={{
            hideOnSinglePage: true
          }}
        />
        <Modal
          title="属性列表"
          visible={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Table
            columns={columnsAttribute}
            dataSource={list2}
            pagination={{
              hideOnSinglePage: true
            }}
          />
        </Modal>

        <Modal
          title="参数列表"
          visible={isModalOpen1}
          onOk={handleOk1}
          onCancel={handleCancel1}
        >
          <Table
            columns={columnsParam}
            dataSource={list3}
            pagination={{
              hideOnSinglePage: true
            }}
          />
        </Modal>

        <Pagination
          total={data.total}
          showSizeChanger
          showQuickJumper
          showTotal={(total) => {
            if (definedLocale === 'zh') {
              return `总共 ${total} 条`
            } else {
              return `Total ${total} items`
            }
          }}
          onChange={changPage}
          pageSizeOptions={['5', '10', '15', '20']}
          defaultPageSize={pageSize}
          current={pageNum}
        />
      </Card>
    </div>
  )
}

export default Index
